<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发帖</title>
    <Link rel="stylesheet" type="text/css" href="style/style.css" />
    <Link rel="stylesheet" type="text/css" href="style/index.css" />
    <Link rel="stylesheet" type="text/css" href="style/post.css" />
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script src="js/ueditor-1.4.3.3/editor_api.js"></script>
    <script src="js/bbs.js"></script>
    <style>
        .edui-default{line-height: 20px}
    </style>
</head>
<body>
<div id="app">
    <bbs>
        <el-form ref="form" label-width="80px" style="width:100%">
            <el-form-item label="板块">
                <el-cascader
                        v-model="topic.boardid"
                        :options="boards"
                        :props="{ expandTrigger: 'hover', value:'id', label:'boardname',emitPath:false }"
                ></el-cascader>

            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="topic.title"></el-input>
            </el-form-item>
            <el-form-item label="帖子内容">
                <script id="container" name="content" type="text/plain">
                    {{topic.title}}
                </script>
            </el-form-item>
            <el-form-item style="text-align: right">
                <el-button type="primary" @click="post">发帖</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </bbs>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            topic:{},
            board:{},
            boards: [],
            ue: null
        },
        created() {
            axios.get("board/queryById"+location.search).then(res=> {
                this.board = res.data;
                this.topic.boardid = this.board.id;
            });
            axios.get("board/query").then(res => {
                this.boards = res.data;
                this.boards.forEach(b=>{
                    b.children.forEach(bb=>delete bb.children);
                })
            });
            this.ue = UE.getEditor('container');
        },
        methods : {
            post() {
                // 获取富文本编辑器的内容
                this.topic.content = this.ue.getContent();

                // 发送请求，发帖
                axios.post('topic/post', this.topic)
                    .then(res => {
                        if (res.data.code === 1) {
                            // 发帖成功，显示成功消息
                            this.$message({
                                showClose: true,
                                message: '发帖成功！',
                                type: 'success'
                            });

                            // 延时跳转
                            setTimeout(() => {
                                location.href = `list.html?bid=${this.topic.boardid}`;
                            }, 2000);
                        } else {
                            const errorMessage = (res.data.data && res.data.data.length > 0)
                                ? res.data.data[0].defaultMessage
                                : res.data.msg || '发帖失败，请稍后再试';

                            this.$message({
                                showClose: true,
                                message: errorMessage,
                                type: 'error'
                            });
                        }
                    })
            }

        }
    })
</script>
</body>
</html>